<template>
  <el-card shadow="hover">
    <el-form ref="ruleFormRef" :model="state.ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
      :size="formSize" status-icon>
      <el-form-item label="商品分类" prop="name">
        <el-cascader v-model="state.ruleForm.value" :options="state.ruleForm.options" :props="props" />
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsName">
        <el-input v-model="state.ruleForm.goodsName" type="text" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品简介">
        <el-input v-model="state.ruleForm.goodsIntro" :rows="2" type="textarea" placeholder="请输入商品简介(100字)" />
      </el-form-item>
      <el-form-item label="商品价格" prop="originalPrice">
        <el-input v-model="state.ruleForm.originalPrice" type="number" placeholder="请输入商品价格" />
      </el-form-item>
      <el-form-item label="商品售卖价" prop="sellingPrice">
        <el-input v-model="state.ruleForm.sellingPrice" type="number" placeholder="请输入商品售价" />
      </el-form-item>
      <el-form-item label="商品库存" prop="stockNum">
        <el-input v-model="state.ruleForm.stockNum" type="number" placeholder="请输入商品库存" />
      </el-form-item>
      <el-form-item label="商品标签">
        <el-input v-model="state.ruleForm.tag" type="text" placeholder="请输入商品小标签" />
      </el-form-item>
      <el-form-item label="商品标签">
        <el-radio-group v-model="state.ruleForm.goodsSellStatus">
          <el-radio label="Sponsor" />
          <el-radio label="Venue" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品主图" prop="goodsCoverImg">
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="state.ruleForm.goodsCoverImg" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="详情内容">
        <div style="border: 1px solid #ccc">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
          <Editor style="height: 200px; overflow-y: hidden;" v-model="state.ruleForm.goodsDetailContent" :defaultConfig="editorConfig"
            :mode="mode" @onCreated="handleCreated" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">立即创建</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  export default {
    name: 'ADD',
  }
</script>
<script setup>
  import api from '@/http'
  import {
    Plus
  } from '@element-plus/icons-vue'
  import '@wangeditor/editor/dist/css/style.css'
  import {
    Editor,
    Toolbar
  } from '@wangeditor/editor-for-vue'
  import {
    reactive,
    ref,
    onMounted,
    onBeforeUnmount,
    shallowRef
  } from "vue"
  const Components = {
    Editor,
    Toolbar
  };
  const state = reactive({
    ruleForm: {
      options: [],
      value: '',
      goodsName: '',
      goodsIntro: '',
      originalPrice: '',
      sellingPrice: '',
      stockNum: '',
      tag: '',
      goodsSellStatus: 0,
      goodsCoverImg:'',
      goodsDetailContent:'',
    }
  })


  // 模拟 ajax 异步获取内容
  onMounted(() => {
    options();
  })
  const options = async () => {
    let {
      resultCode,
      data
    } = await api.commodity.categoriesSelect(1, 1000, 1, 0);
    if (resultCode === 200) {
      state.ruleForm.options = data.list.map(e => {
        return {
          value: e.categoryId,
          label: e.categoryName,
          level: e.categoryLevel,
          leaf: e.categoryLevel >= 3,
        }
      })
    }
  }
  const props = {
    // 设置懒加载
    lazy: true,
    // 懒加载获取数据
    lazyLoad(node,resolve) {
      let {value,level} = node;
      api.commodity.categoriesSelect(1,1000,++level,value).then(data => {
        if(data.resultCode === 200){
          const nodes = data.data.list.map(e => {
            return {
              value: e.categoryId,
              label: e.categoryName,
              level: e.categoryLevel,
              leaf: e.categoryLevel >= 3,
            }
          })
          resolve(nodes);
        }
      })
    }
  }

  const editorRef = shallowRef()
  // 内容 HTML
  const valueHtml = ref('')
  const toolbarConfig = {}
  const editorConfig = {
    placeholder: '请输入内容...'
  }
  
  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })

  const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
  }
</script>

<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  /deep/ .el-cascader-menu__empty-text{
    display:none !important;
  }
</style>